<template>
  <div>
    <el-form :inline="true"  class="demo-form-inline" :model="cForm">
      <el-form-item label="一级联动">
        <el-select  placeholder="选择" v-model="cForm.category1Id" @change="getchangecategory1Id(cForm.category1Id)" :disabled="! isshowselect">
          <el-option :label="item.name" :value="item.id" v-for="(item) in list1" :key="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="二级联动">
        <el-select  placeholder="选择" v-model="cForm.category2Id" @change="getchangecategory2Id(cForm.category2Id)" :disabled=" ! isshowselect">
          <el-option :label="item.name" :value="item.id" v-for="(item) in list2" :key="item.id"></el-option>
        </el-select>

      </el-form-item>
      <el-form-item label="三级联动">
        <el-select  placeholder="选择" v-model="cForm.category3Id" @change="getchangecategory3Id(cForm.category3Id)" :disabled="! isshowselect">
          <el-option :label="item.name" :value="item.id" v-for="(item) in list3" :key="item.id"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
name: "CategorySelect";
export default {
  props:{
    isshowselect:{
      type:Boolean,
      default:true
    },
  },
  data() {
    return {
        list1:[],
        list2:[],
        list3:[],
        cForm:{
            category1Id:'',
            category2Id:'',
            category3Id:''
        }
    };
  },
  methods:{
    async getreqAttr1list(){
      let result= await this.$API.attr.reqAttr1list();
      if(result.code === 200){
        this.list1 = result.data
      }
    },
    async getchangecategory1Id(index){
        this.cForm.category2Id ='';
        this.cForm.category3Id = '';
        this.list2 = [];
        this.list3 = [];
        let result = await this.$API.attr.reqAttr2list(index);
        if(result.code === 200){
      
        this.list2 = result.data
        }
    },
    async getchangecategory2Id(index){
        this.cForm.category3Id = '';
        this.list3 = [];
        let result = await this.$API.attr.reqAttr3list(index);
        if(result.code === 200){
        this.list3 = result.data
    }
    },
    getchangecategory3Id(){
        this.$emit('getCategorySelectid',JSON.stringify(this.cForm))
       
    }
  },
  mounted(){
    this.getreqAttr1list()
  }
};
</script>
<style></style>
